<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>矢量地图文档显示</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="mapboxgl" src="./static/libs/include-mapboxgl-local.js"></script>
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        /** 地图初始化
         */
        function init() {
            "use strict";
            //地图容器
            var map = new mapboxgl.Map({
                container: 'map',
                minZoom: 3,
                zoom: 6,
                center: [112.247175, 30.152892]
            });
            var navigationControl = new mapboxgl.NavigationControl();
            map.addControl(navigationControl, 'top-left');
            var { protocol, ip, port } = window.webclient;
            var docLayer = new mapboxgl.Zondy.Map.MapDocLayer("HubeiMark3857", {
                layerID: 'mapgis-doc-3857',
                //IP地址
                ip: `${ip}`,
                //端口号
                port: `${port}`,
                //只显示一个图层,不平铺显示
                noWrap: true
            });
            docLayer.addToMap(map);
            //注册鼠标移动事件
            map.on('mousemove', function (e) {
                //经纬度坐标转web墨卡托
                const earthRad = 6378137.0;
                const x = e.lngLat.lng * Math.PI / 180 * earthRad;
                const a = e.lngLat.lat * Math.PI / 180;
                const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
                document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
            });
        }
    </script>
</head>

<body onload="init()">
    <div id="map" style="width: 100%; height:100vh;">
        <div id="mouse-position">
        </div>
    </div>
</body>

</html>